<template>
  <div class="skin">
    <div class="pic-box">
      <div class="cover">
        {{namelist}}
      </div>
      <div class="pic">
        <b>皮肤</b>
        <ul class="pic-list">
          <li v-for="(imglist,index) in imglist" :key="imglist.id" @mouseenter="getpifu(index)">
            <i :class="code===index?'current':''">
              <img :src="imglist.img" alt />
            </i>
            <p></p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    code: 0,
    id: 0,
    obj: {},
    imglist: [],
    namelist: ''
  }),
  created () {
    this.getgamedata()
    this.id = this.$route.params.id
  },
  methods: {
    async getgamedata () {
      const { data } = await this.$axios.get('http://localhost:8080/getdata')
      var list = data
      this.id = Number(this.id)
      for (var i = 0; i < list.length; i++) {
        if (list[i].ename === this.id) {
          this.obj = list[i]
        }
      }
      var newarr = this.obj.bj
      var newarr2 = []
      for (var j = 0; j < newarr.length; j++) {
        newarr2[j] = { img: `https://game.gtimg.cn/images/yxzj/img201606/heroimg/${this.obj.ename}/${this.obj.ename}-smallskin-${j + 1}.jpg` }
      }
      this.imglist = newarr2
      var oskin = document.querySelector('.skin')
      oskin.style.backgroundImage = `url(${this.obj.bj[0].img})`
      this.namelist = this.obj.skin_name.split('|')[0]
    },
    getpifu (index) {
      this.code = index
      var oskin = document.querySelector('.skin')
      oskin.style.backgroundImage = `url(${this.obj.bj[index].img})`
      this.namelist = this.obj.skin_name.split('|')[index]
    }
  }
}
</script>
<style lang="less" scoped>
body {
  * {
    margin: 0;
    padding: 0;
  }
  width: 100%;
  height: 100%;
  .skin {
    width: 100%;
    min-width: 1200px;
    height: 900px;
    overflow: hidden;
    background: top no-repeat;
    .pic-box {
      width: 1200px;
      margin: 0 auto;
      position: relative;
      .cover{
        position: absolute;
        top: 400px;
        width: 30px;
        padding: 5px;
        background: rgba(0, 0, 0, 0.7);
        font-size: 30px;
        color: #fff;
      }
      .pic {
        position: absolute;
        right: 0;
        top: 720px;
        b {
          font-weight: 100;
          display: block;
          width: 25px;
          height: 62px;
          float: right;
          border-radius: 5px;
          background: #f3c258;
          line-height: 26px;
          text-align: center;
          font-size: 16px;
          padding-top: 15px;
          color: #000;
        }
        .pic-list {
          float: right;
          width: 780px;
          height: 110px;
          overflow: hidden;
          li {
            list-style: none;
            width: 89px;
            height: 88px;
            float: right;
            cursor: pointer;
            .current{
              border-color: #f3c258
            }
            i {
              float: left;
              width: 65px;
              height: 67px;
              margin-right: 25px;
              border: solid 4px #7a7a7a;
              border-radius: 0 12px;
              overflow: hidden;
              img {
                width: 67px;
                height: 69px;
                margin-left: -1px;
                margin-top: -1px;
                display: block;
                border: 0;
                border-radius: 2px 2px 2px 2px;
              }
            }
          }
        }
      }
    }
    .wuliao{
      position: absolute;
      top: 900px;
      width: 100%;
      height: 400px;
    }
  }
}
</style>
